<template>
  <!--     @ok="handleOk" -->
  <j-modal
    :title="title"
    :width="1000"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @cancel="handleCancel"
    cancelText="关闭"
    :okButtonProps="{ style: { display: 'none' } }"
    destroyOnClose
  >
    <!-- <a-button style="margin: 10px 0" type="primary" @click="$envet = serverCoach($envet)"> </a-button>
    <a-button style="margin: 10px 0" type="primary" @click="$envet = serverCoach($envet)"> 绑定服务</a-button> -->

    <a-tabs v-model:activeKey="activeKey" @tabClick="clicktabClick">
      <a-tab-pane :key="item.time" :tab="item.name" v-for="(item, index) in startLiset"></a-tab-pane>
    </a-tabs>

    <!-- 时间 -->
    <div class="timeBox">
      <div
        class="timeItem"
        :id="item.status == 0 ? 'timeItem' : ''"
        :style="{ 'background-color': item.status == 2 ? '#d86d37' : '', color: item.status == 2 ? '#fff' : '' }"
        v-for="(item, index) in serverTimeList"
        @click="timeItem(item)"
      >
        <div class="time">
          {{ item.timeStr }}
        </div>
        <div class="timeTitle">
          <span>{{ item.status ? '不可预约' : '可预约' }}</span>
        </div>
      </div>
    </div>

    <div class="btnBox">
      <a-button class="saves" v-if="!datas.length">保存</a-button>
      <a-button class="save" v-else @click="clickSave">保存</a-button>

      <a-button class="all" @click="clickAll">全选</a-button>
    </div>
  </j-modal>
</template>

<script>
import {
  httpAction,
  getFileAccessHttpUrl,
  xhdjCoachServerTimeQuery,
  xhdjCoachServerTimeServerTimeList,
  xhdjCoachServerTimeFrontSet
} from '@/api/manage'
import Area from '@/components/_util/Area'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import moment from 'moment'
export default {
  name: 'XhdjCoachInfoDialog',
  mixins: [JeecgListMixin],
  data () {
    return {
      title: '操作',
      dataList: {},
      activeKey: moment().format('YYYY-MM-DD'),
      visible: false,
      model: {},

      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },

      serverTimeList: [], //数据
      datas: [], //保存接口数据
      timeData: {}, //获取时间的接口数据
      startLiset: [
        {
          name: '今天' + '(' + moment().format('MM-DD') + ')',
          time: moment().format('YYYY-MM-DD')
        },
        {
          name: '明天' + '(' + moment().add(1, 'days').format('MM-DD') + ')',
          time: moment().add(1, 'days').format('YYYY-MM-DD')
        },
        {
          name: '后天' + '(' + moment().add(2, 'days').format('MM-DD') + ')',
          time: moment().add(2, 'days').format('YYYY-MM-DD')
        },
        {
          name: this.getChineseDayOfWeek(moment().add(3, 'days').format('E')) + moment().add(3, 'days').format('MM-DD'),
          time: moment().add(3, 'days').format('YYYY-MM-DD')
        }
      ],

      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      isorter: {
        column: 'create_time',
        order: 'desc'
      },
      coachId: '',
      paramsDate: {},
      columns: [],
      confirmLoading: false,
      dataSource: [],
      validatorRules: {},
      url: {
        add: '/xhdjServerCoachLink/add',
        delete: 'xhdjServerCoachLink/delete'
      },
      all: [], // 地址信息
      allList: [], // 省份数据
      citys: [],
      cityss: []
    }
  },
  created () {
    this.all = new Area().all
    this.allList = this.all.filter(res => res.index == 1)
  },
  methods: {
    getChineseDayOfWeek (dayOfWeek) {
      const dayss = ['其它', '周一', '周二', '周三', '周四', '周五', '周六', '周日']
      return dayss[dayOfWeek]
    },

    // 点击时间
    timeItem (item) {
      console.log(item)
      item.status = !item.status
      this.datas = this.serverTimeList.map(item => {
        if (!item.status) {
          item.status = 0
        } else {
          item.status = 1
        }
        return item
      })
    },

    // 获取时间
    getxhdjCoachServerTimeQuery (data) {
      xhdjCoachServerTimeQuery(data).then(res => {
        console.log(res)
        if (res.result.serverTimeList == null) {
          this.getxhdjCoachServerTimeServerTimeList(data)
        } else {
          this.serverTimeList = res.result.serverTimeList
        }
      })
    },

    //获取时间时没有时间， 设置时间
    getxhdjCoachServerTimeServerTimeList (data) {
      xhdjCoachServerTimeServerTimeList(data).then(res => {
        console.log(res)
        this.serverTimeList = res.result.serverTimeList
      })
    },

    //保存设置的时间
    getxhdjCoachServerTimeFrontSet (data) {
      xhdjCoachServerTimeFrontSet({ serverTimeList: data }).then(res => {
        console.log(res)
        if (res.code == 200) {
          this.$message.warning(res.message)
          this.getxhdjCoachServerTimeQuery(this.timeData)

          // this.visible = false
        }
      })
    },

    uploadAction () {
      return window._CONFIG['domianURL'] + this.url.upload
    },
    getAvatarView: function (avatar) {
      return getFileAccessHttpUrl(avatar)
    },
    add () {
      //初始化默认值
      this.edit({})
    },
    onSelectChange (selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectionRows = selectionRows
      this.paramsDate = {
        coachId: this.coachId,
        serverIds: selectedRowKeys
      }
    },
    getCheckboxProps (record) {
      return {
        props: {
          disabled: record.xhdjServerCoachLinkId != null
        }
      }
    },

    edit (record) {
      console.log(record)
      this.dataList = record
      this.timeData.coachId = record.id
      this.timeData.date = moment().format('YYYY-MM-DD')
      this.getxhdjCoachServerTimeQuery(this.timeData)
      this.visible = true
    },

    // 点击tabs栏
    clicktabClick (e) {
      console.log(e)
      this.timeData.date = e
      this.datas = []
      this.getxhdjCoachServerTimeQuery(this.timeData)
    },
    // 保存
    clickSave () {
      console.log('保存')
      console.log(this.serverTimeList)

      this.getxhdjCoachServerTimeFrontSet(this.datas)
    },

    // 全选
    clickAll () {
      console.log('全选')
      console.log(this.serverTimeList)
      var open = 0
      var not = 0
      var stasts = 1
      this.serverTimeList.forEach(item => {
        if (item.status) {
          open = open + 1
        } else {
          not = not + 1
        }
      })

      if (open >= not) {
        console.log('关闭')
        stasts = 0
      }

      const openDate = this.serverTimeList.map(item => {
        item.status = stasts
        return item
      })

      this.datas = openDate
    },

    close () {
      this.$emit('close')
      this.activeKey = moment().format('YYYY-MM-DD')
      this.selectedRowKeys = []
      this.selectionRows = []
      this.timeData = {}
      this.dataList = {}
      this.visible = false
    },

    handleCancel () {
      this.close()
    }
  }
}
</script>

<style lang="less" scoped>
.btnBox {
  margin-top: 30px;
  display: flex;
  margin-bottom: 15px;
  .save {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 40px;
    background-color: #5ec470;
    border-radius: 15px;
    color: #fff;
  }

  .saves {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 40px;
    background-color: #eee;
    border-radius: 15px;
    color: #000;
  }
  .all {
    margin-left: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 40px;
    background-color: red;
    border-radius: 15px;
    color: #fff;
  }
}

.timeBox {
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;

  .timeItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 10px 15px;
    width: 100px;
    height: 70px;
    border-radius: 15px;
    margin-top: 15px;
    margin-right: 10px;
    color: #9e9e9e;
    background-color: #efeff3;
    border: 1rpx solid #ccc;
  }

  #timeItem {
    color: #fff;
    background-color: #5ec470;
    border: 1px solid #5ec470;
  }
}
</style>
